<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>日期时间</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            日期时间-laydate
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="row">
                                    <div class="col-md-6">
                                        <p>基础用法</p>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">选择年份：</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-calendar"></i></span>
                                                    <input type="text" class="form-control" id="yearonly"
                                                        placeholder="yyyy">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">选择年月：</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-calendar"></i></span>
                                                    <input type="text" class="form-control" id="yearmonth"
                                                        placeholder="yyyy-MM">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">选择日期：</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-calendar"></i></span>
                                                    <input type="text" class="form-control" id="date"
                                                        placeholder="yyyy-MM-dd">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">选择时间：</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-calendar"></i></span>
                                                    <input type="text" class="form-control" id="time"
                                                        placeholder="HH:mm:ss">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">日期时间：</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-calendar"></i></span>
                                                    <input type="text" class="form-control" id="date-time"
                                                        placeholder="yyyy-MM-dd HH:mm:ss">
                                                </div>
                                            </div>
                                        </div>
                                        <p>范围选择</p>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">日期范围：</label>
                                            <div class="col-sm-8">
                                                <div class="input-group" id="date-range">
                                                    <input type="text" class="form-control" id="start-date"
                                                        placeholder="yyyy-MM-dd">
                                                    <span class="input-group-addon">-</span>
                                                    <input type="text" class="form-control" id="end-date"
                                                        placeholder="yyyy-MM-dd">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">年范围：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="year-range">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">年月范围：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="month-range">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">日期范围：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="date-range">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">时间范围：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="time-range">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">日期时间范围：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="datetime-range">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <p>自定义格式</p>

                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">日期格式1：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="formatter1"
                                                    placeholder="yyyy年MM月dd日">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">日期格式2：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="formatter2"
                                                    placeholder="dd/MM/yyyy">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">日期格式3：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="formatter3"
                                                    placeholder="yyyyMMdd">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">日期格式4：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="formatter4"
                                                    placeholder="HH点mm分">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">日期格式5：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="formatter5" placeholder="~">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">日期格式6：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="formatter6" placeholder="到">
                                            </div>
                                        </div>
                                        <p>范围控制</p>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">日期范围：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="limit1"
                                                    placeholder="日期可选值设定在 2022-4-14 到 2032-4-14">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">天数限制：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="limit2"
                                                    placeholder="限制当前前后7天可选">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">时间限制：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="limit3"
                                                    placeholder="限制固定时间段">
                                            </div>
                                        </div>
                                        <p>其他示例</p>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">隐藏底部：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="other1" placeholder="不显示底部">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">只显示确定：</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control" id="other2"
                                                    placeholder="只显示确定按钮">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>

    <script type="text/javascript">
        laydate.render({
            elem: '#yearonly'
            , type: 'year'
            , theme: 'reset' //自定义主题
        });
        laydate.render({
            elem: '#yearmonth'
            , type: 'month'
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#date'
            , theme: 'reset' //自定义主题
        });
        laydate.render({
            elem: '#time',
            type: 'time'
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#date-time',
            type: 'datetime'
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#date-range',
            range: ['#start-date', '#end-date']
            , theme: 'reset' //自定义主题

        });

        laydate.render({
            elem: '#year-range',
            type: 'year',
            range: true
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#month-range',
            type: 'month',
            range: true
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#date-range',
            range: true
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#time-range',
            type: 'time',
            range: true

            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#datetime-range',
            type: 'datetime',
            range: true
            , theme: 'reset' //自定义主题

        });


        //自定义格式
        laydate.render({
            elem: '#formatter1'
            , format: 'yyyy年MM月dd日'
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#formatter2'
            , format: 'dd/MM/yyyy'
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#formatter3'
            , format: 'yyyyMMdd'
            , theme: 'reset' //自定义主题
        });
        laydate.render({
            elem: '#formatter4'
            , type: 'time'
            , format: 'H点m分'
            , theme: 'reset' //自定义主题
        });
        laydate.render({
            elem: '#formatter5'
            , type: 'month'
            , range: '~'
            , format: 'yyyy-MM'
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#formatter6'
            , type: 'datetime'
            , range: '到'
            , format: 'yyyy年M月d日H时m分s秒'
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#limit1'
            , min: '2022-4-14'
            , max: '2032-4-14'
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#limit2'
            , min: -7
            , max: 7
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#limit3'
            , type: 'time'
            , min: '09:30:00'
            , max: '17:30:00'
            , btns: ['clear', 'confirm']
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#other1'
            , showBottom: false
            , theme: 'reset' //自定义主题

        });
        laydate.render({
            elem: '#other2'
            , btns: ['confirm']
            , theme: 'reset' //自定义主题

        });
    </script>
</body>

</html>